<template>
	<view>
		<topic-info :item="topicInfo"></topic-info>
		<!-- tabber切换 -->
		<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollItemStyle="width:50%;" scrollStyle="border-bottom:0;">
		</swiperTabHead>

		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item,index) in tablist" :key="index">
				<template v-if="tabIndex==index">
					<!-- 列表 -->
					<block v-for="(item1, index1) in item.list" :key="index1">
						<common-list :item="item1" :index="index1"></common-list>
					</block>
					<!-- 上拉加载 -->
					<loadMore :loadtext="item.loadtext"></loadMore>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import topicInfo from "../../components/topic/topic-info.vue";
	import swiperTabHead from '../../components/common/swiper-tab-head.vue';
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue';

	export default {
		components: {
			topicInfo,
			swiperTabHead,
			commonList,
			loadMore
		},
		data() {
			return {
				topicInfo: {
					titlepic: "../../static/demo/topicpic/13.jpeg",
					title: "忆往事 敬余生",
					desc: "描述",
					totalnum: "1000",
					todaynum: "15"
				},
				tabBars: [{
						name: "默认",
						id: "moren"
					},
					{
						name: "最新",
						id: "zuixin"
					}
				],
				tabIndex: 0,
				tablist: [{
					loadtext: "上拉加载更多",
					list: [{
							userpic: "../../static/demo/userpic/1.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "img", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/11.jpg",
							infoNum: {
								index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 11,
								caiNum: 12,
							},
							commentNum: 12,
							shareNum: 123
						},
						{
							userpic: "../../static/demo/userpic/1.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/11.jpg",
							playNum: "20w",
							long: "2:47",
							infoNum: {
								index: 2, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 1,
								caiNum: 14,
							},
							commentNum: 12,
							shareNum: 123
						}
					]
				}, {
					loadtext: "上拉加载更多",
					list: [{
							userpic: "../../static/demo/userpic/2.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "img", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/12.jpg",
							infoNum: {
								index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 11,
								caiNum: 12,
							},
							commentNum: 12,
							shareNum: 123
						},
						{
							userpic: "../../static/demo/userpic/2.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/11.jpg",
							playNum: "20w",
							long: "2:47",
							infoNum: {
								index: 2, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 1,
								caiNum: 14,
							},
							commentNum: 12,
							shareNum: 123
						}
					]
				}]
			}
		},
		//上拉触底事件
		onReachBottom() {
			this.loadmore();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getdate()
		},
		methods: {
			//上拉刷新
			getdate() {
				setTimeout(()=> {
					//获取数据
					let arr = [{
							userpic: "../../static/demo/userpic/2.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "img", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/12.jpg",
							infoNum: {
								index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 11,
								caiNum: 12,
							},
							commentNum: 12,
							shareNum: 123
						},
						{
							userpic: "../../static/demo/userpic/3.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video", //img:图文 video: 视频
							titlepic: "../../static/demo/datapic/13.jpg",
							playNum: "20w",
							long: "2:47",
							infoNum: {
								index: 2, //0 - 没有操作, 1 - 顶, 2 - 踩
								dingNum: 1,
								caiNum: 14,
							},
							commentNum: 12,
							shareNum: 123
						}
					]
					// 赋值
					this.tablist[this.tabIndex].list = arr;
					// 关闭下拉刷新
					uni.stopPullDownRefresh();
				}, 2000)
			},
			loadmore() {
				if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
					return;
				}
				this.tablist[this.tabIndex].loadtext = "加载中";
				setTimeout(() => {
					//获取完成
					let obj = {
						userpic: "../../static/demo/userpic/2.jpg",
						username: "昵称",
						isguanzhu: false,
						title: "我是标题",
						type: "img", //img:图文 video: 视频
						titlepic: "../../static/demo/datapic/12.jpg",
						infoNum: {
							index: 1, //0 - 没有操作, 1 - 顶, 2 - 踩
							dingNum: 11,
							caiNum: 12,
						},
						commentNum: 12,
						shareNum: 123
					};
					this.tablist[this.tabIndex].list.push(obj);
					this.tablist[this.tabIndex].loadtext = "上拉加载更多";
				}, 1000)
			},
			//tabbar点击事件
			tabtap(index) {
				this.tabIndex = index;
			},
			//swiper滑动事件
			swiperChange(e) {
				// console.log(JSON.stringify(e.detail));
				this.tabIndex = e.detail.current;
			}
		}
	}
</script>

<style>
	.topic-bg {
		width: 100%;
		height: 300upx;
		position: relative;
		overflow: hidden;
	}

	.topic-bg>image {
		width: 100%;
		position: absolute;
		filter: blur(10px);
	}

	.topic-info {
		padding: 0 25upx;
	}

	.topic-info-t {
		position: relative;
	}

	.topic-info-t>image {
		width: 150upx;
		height: 150upx;
		border-radius: 20upx;
		position: absolute;
		top: -75upx;
	}

	.topic-info-t>view {
		font-size: 35upx;
		margin-left: 180upx;
		flex: 1;
	}

	.topic-info-c {
		padding: 35upx 0 15upx 0;
	}

	.topic-info-c>view {
		color: #CDCDCD;
	}

	.topic-info-b {
		color: #A3A3A3;
		font-size: 32upx;
	}
</style>
